:host(.quick-action-list-item) {
  --label-color: rgb(215, 218, 224);
  --description-color: rgb(171, 178, 191);
  --action-item-color: rgb(197, 197, 197);
  --action-item-hover-color: rgba(90, 93, 94, 0.31);
  --hover-color: #2c313a;
}

:host(.quick-action-list-item) {
  display: flex;
  cursor: pointer;
  padding: 0 6px;

  .icon {
    width: 22px;
    height: 22px;
    padding-right: 6px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .label {
    flex: 0;
    color: var(--label-color);
  }

  .description {
    flex: 1;
    opacity: 0.7;
    margin-left: 0.5em;
    font-size: 0.9em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: var(--description-color);
    max-width: 426px;
  }

  .actions {
    flex: 0;
    display: none;
    align-items: center;
    white-space: nowrap;
  }

  .action-item {
    width: 22px;
    height: 22px;
    color: var(--action-item-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
  }

  .action-item_icon {
    width: inherit;
    height: inherit;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .action-item:hover {
    background-color: var(--action-item-hover-color);
  }
}

:host(.quick-action-list-item.active) {
  background-color: var(--hover-color);

  .icon {
    filter: brightness(1.5);
  }
}

:host(.quick-action-list-item:hover) {
  background-color: var(--hover-color);

  .icon {
    filter: brightness(1.5);
  }

  .actions {
    display: flex;
  }
}
